<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 设置页面字符编码为UTF-8 -->
    <meta charset="UTF-8" />
    <!-- 设置页面标题 -->
    <title>商品列表</title>
    <!-- 引入基础样式表 -->
    <link rel="stylesheet" href="../css/base.css" />
    <!-- 引入商品列表页专用样式表 -->
    <link rel="stylesheet" href="../css/list.css" />
  </head>
  <body>
    <!-- 页面头部，包含页面标题和回到首页的链接 -->
    <div class="header">
      <h1>仿站电商·商品列表</h1>
      <a href="./index.html" class="back-link">回到首页</a>
    </div>

    <!-- 分页容器，包含分页按钮和信息 -->
    <div class="pagination-container">
      <!-- 首页按钮 -->
      <button class="page-btn first-page">首页</button>
      <!-- 上一页按钮 -->
      <button class="page-btn prev-page">上一页</button>
      <!-- 当前页码和总页数信息 -->
      <span class="page-info">
        <input type="text" class="current-page" value="1" /> /
        <span class="total-pages">7</span>
      </span>
      <!-- 下一页按钮 -->
      <button class="page-btn next-page">下一页</button>
      <!-- 末页按钮 -->
      <button class="page-btn last-page">末页</button>
      <!-- 跳转提示 -->
      <span class="jump-to">跳转</span>
      <!-- 每页显示条目数选择器 -->
      <select class="page-size">
        <option value="12">12</option>
        <option value="24">24</option>
        <option value="36">36</option>
      </select>
    </div>

    <!-- 商品容器，用于动态生成商品列表 -->
    <div class="goods-container">
      <!-- 商品列表将通过 JavaScript 动态生成 -->
    </div>

    <!-- 页面底部 -->
    <footer style="background-color: #87ceeb; line-height: 100px; margin: 0; font-size: 70px;">
      页面底部
    </footer>

    <!-- 引入Axios库，用于发起HTTP请求 -->
    <script src="../lib/axios.min.js"></script>
    <!-- 引入http.js，可能包含自定义的HTTP请求封装 -->
    <script src="../lib/http.js"></script>
    <!-- 引入商品列表页的JavaScript逻辑 -->
    <script src="../js/list.js"></script>
  </body>
</html>